<template>
  <div id="ceshi">
    <div id="cc"></div>
    <div class="info" style="position: absolute;left: 1000px;top: 110px; ">
      <h4>未来四天预报天气</h4>
      <hr>
      <p id='forecast'></p>
    </div>

    <div class="input-card" style="position: absolute;left: 250px;top: 110px; height: 200px;">
      <h4>下属行政区查询</h4>
      <div class="input-item">
        <div class="input-item-prepend"><span class="input-item-text">省市区</span></div>
        <select id="province" style="width:100px" @change='loadProv()'></select>
      </div>
      <div class="input-item">
        <div class="input-item-prepend"><span class="input-item-text">地级市</span></div>
        <select id='city' style="width:100px" @change='loadCity()'></select>
      </div>

    </div>
  </div>
</template>

<script>

  export default {
    name: "shouye",

    data(){
      return{
        district:"",
        pp:""
      }
    },
    methods: {
      loadProv() {
        var province = $("#province").val();
        //查询中国下的市级名称
        this.district.search(province, function(status, result) {
          var city = result.districtList[0].districtList
          console.log(city)
          var html = "<option value='0'>----请选择市----</option>";
          for (var i = 0; i < city.length; i++) {
            html += "<option value='" + city[i].name + "'>" + city[i].name + "</option>"
          }
          $("#city").html(html);

        })

      },
      loadCity() {
        var city = $("#city").val();
        var self = this;
        //查询中国下的市级名称
        this.district.search(city, function(status, result) {

          self.pp = result.districtList[0].center
        })

        this.loadData(city);
      },
      loadData(address) {
        var self = this;
        //这里需要重新渲染
        var myMap = new AMap.Map('cc', {
          resizeEnable: true,
          center: self.pp,
          zoom: 15
        });

        AMap.plugin('AMap.Weather', function() {
          var weather = new AMap.Weather();
          //查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
          weather.getLive(address, function(err, data) {
            if (!err) {
              var str = [];
              str.push('<h4 >实时天气' + '</h4><hr>');
              str.push('<p>城市/区：' + data.city + '</p>');
              str.push('<p>天气：' + data.weather + '</p>');
              str.push('<p>温度：' + data.temperature + '℃</p>');
              str.push('<p>风向：' + data.windDirection + '</p>');
              str.push('<p>风力：' + data.windPower + ' 级</p>');
              str.push('<p>空气湿度：' + data.humidity + '</p>');
              str.push('<p>发布时间：' + data.reportTime + '</p>');
              var marker = new AMap.Marker({
                map: myMap,
                position: self.pp
              });
              var infoWin = new AMap.InfoWindow({
                content: '<div class="info" style="position:inherit;margin-bottom:0;">' + str.join('') +
                  '</div><div class="sharp"></div>',
                isCustom: true,
                offset: new AMap.Pixel(0, -37)
              });
              infoWin.open(myMap, marker.getPosition());
              marker.on('mouseover', function() {
                infoWin.open(myMap, marker.getPosition());
              });
            }
          });

          weather.getForecast(address, function(err, data) {
            if (err) {
              return;
            }
            var str = [];
            for (var i = 0, dayWeather; i < data.forecasts.length; i++) {
              dayWeather = data.forecasts[i];
              str.push(dayWeather.date + ' <span class="weather">' + dayWeather.dayWeather + '</span> ' +
                dayWeather.nightTemp + '~' + dayWeather.dayTemp + '℃');
            }
            document.getElementById('forecast').innerHTML = str.join('<br>');
          });
        })
      }
    },
    mounted(){
      //初始化地图
      var map = new AMap.Map('cc');

      var self = this;
      //加载地图查询插件
      AMap.plugin('AMap.DistrictSearch', function() {
        // 创建行政区查询对象
        self.district = new AMap.DistrictSearch()
        //查询中国下的省级名称
        self.district.search("中国", function(status, result) {
          var prov = result.districtList[0].districtList
          console.log(prov)
          var html = "<option value='0'>----请选择省份----</option>";
          for(var i = 0; i < prov.length; i++) {
            html += "<option value='" + prov[i].name + "'>" + prov[i].name + "</option>"
          }
          $("#province").html(html);
        })
      })
    }
  }
</script>
<style>
  html,
  body {
    height: 100%;
    margin: 0px;
    /*去掉默认边距*/
  }

  #cc {
    width: 100%;
    height: 100%;
  }
  #ceshi {
    width: 100%;
    height: 100%;

  }

  .weather {
    width: 5rem;
    display: inline-block;
    padding-left: 0.5rem;
  }

  .sharp {
    height: 1rem;
    width: 1rem;
    background-color: white;
    transform: rotateZ(45deg);
    box-shadow: 2px 2px 3px rgba(114, 124, 245, .5);
    position: inherit;
    margin-left: 10.5rem;
    margin-top: -6px;
  }
</style>

